<template>
    <div>
      <grid :cols="5" :show-lr-borders="false">
        <grid-item v-for="item in gridLIst" :key="item.index">
          <div style="width: 100%;">
            <img :src=item.url alt="" class="gridimg">
            <span class="grid-center">{{ item.tit}}</span>
          </div>
        </grid-item>
      </grid>
    </div>
</template>

<script>
  import { Grid, GridItem, GroupTitle } from 'vux'

  const gridLIst = [{
    url: 'src/assets/images/index/grid/menu1.png',
    index: 0,
    tit: '鹤城风情',
    goUrl:'/HelloWorld'
  },{
    url: 'src/assets/images/index/grid/menu2.png',
    index: 1,
    tit: '鹤城商圈'
  },{
    url: 'src/assets/images/index/grid/menu3.png',
    index: 2,
    tit: '鹤城便民'
  },{
    url: 'src/assets/images/index/grid/menu4.png',
    index: 3,
    tit: '鹤城品牌'
  },{
    url: 'src/assets/images/index/grid/menu5.png',
    index: 4,
    tit: '鹤城特色馆'
  },{
    url: 'src/assets/images/index/grid/menu6.png',
    index: 5,
    tit: '大宗采购'
  },{
    url: 'src/assets/images/index/grid/menu7.png',
    index: 6,
    tit: '市场行情'
  },{
    url: 'src/assets/images/index/grid/menu8.png',
    index: 7,
    tit: '实景导视'
  },{
    url: 'src/assets/images/index/grid/menu9.png',
    index: 8,
    tit: '推荐商品'
  },{
    url: 'src/assets/images/index/grid/menu10.png',
    index: 9,
    tit: '关于我们'
  }
  ]
  export default {
    name: "GridList",
    components: {
      Grid,
      GridItem,
      GroupTitle
    },
    data(){
      return{
        gridLIst: gridLIst
      }
    },
    methods:{
    }
  }
</script>

<style scoped>
  .gridimg{
    width: inherit;
    height: auto;
    display: inline-block;
  }
  .grid-center{
    font-size: 10px;
  }
  .weui-grid{
    padding: 6px;
    text-align: center;
  }
  .weui-grid:before{
    border-right: none;
  }
  .weui-grid:after{
    border-bottom: none;
  }
</style>
